<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条歌词</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: skyblue;
            font-size: 2em;
        }
        .content{
            position: relative;
            height: 2em;
        }
        .text1{
            position: absolute;
            top:0;
            color: white;

        }
        .text2{
            --progress:0%;
            position: absolute;
            top:0;
            color:yellow;
            clip-path: polygon(0% 0%,var(--progress) 0 ,var(--progress) 100%,0 100%);
            transition: all 0.1s ease-in-out;
        }
    </style>
</head>

<body>
<div class="content">
    <div class="text1">宝物该有人捧着 你是不是我的</div>
    <div class="text2">宝物该有人捧着 你是不是我的</div>
</div>
<input type="range" id="progress" value="0">
</body>
<script>
    const progress = document.querySelector('#progress');
    const text2 = document.querySelector('.text2');
    progress.onchange= function (){
        const value = progress.value;
        console.log(value);
        text2.style.setProperty('--progress',value+'%');
       
    }
    const ide= setInterval(function (){
        const value = progress.value++;
        console.log(value);
        text2.style.setProperty('--progress',value+'%');
        if(value>=100){
            clearInterval(ide);
        }
    },200)
</script>
</html>